<template>
  <BasicLayout class="guide-detail">
    <template #wrapper>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>状态</span>
          <el-tag
            v-if="guide.verify == 0"
            class="box-card-header-btn"
            type="danger"
            size="medium"
            plain
            >待审核</el-tag
          >
          <el-tag
            v-if="guide.verify == 1"
            class="box-card-header-btn"
            type="success"
            size="medium"
            plain
            >正常</el-tag
          >
          <el-tag
            v-if="guide.verify == -1"
            class="box-card-header-btn"
            type="info"
            size="medium"
            plain
            >失效</el-tag
          >
        </div>
        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>昵称：</span>
            </el-col>
            <el-col :span="18" class="content">
              <span>{{ guide.nickname }}</span>
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>真实姓名：</span>
            </el-col>
            <el-col :span="18" class="content">
              <span>{{ guide.realname }}</span>
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>手机号码：</span>
            </el-col>
            <el-col :span="18" class="content">
              <span>{{ guide.mobile }}</span>
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>OPENID：</span>
            </el-col>
            <el-col :span="18" class="content">
              <span>{{ guide.openid }}</span>
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>是否订阅: </span>
            </el-col>
            <el-col :span="18" class="content">
              <el-tag v-if="guide.subscribe == 1" class="tag">是</el-tag>
              <el-tag v-else type="warning" class="tag">否</el-tag>
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>头像：</span>
            </el-col>
            <el-col :span="18" class="content">
              <el-avatar
                shape="square"
                size="large"
                :src="guide.headimgurl"
              ></el-avatar>
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>自定义头像：</span>
            </el-col>
            <el-col :span="18" class="content">
              <el-avatar
                shape="square"
                size="large"
                :src="guide.diyheadimgurl"
              ></el-avatar>
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>身份证相片：</span>
            </el-col>
            <el-col :span="18" class="content">
              <el-avatar
                shape="square"
                size="large"
                :src="guide.identifyImg"
              ></el-avatar>
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>自我介绍：</span>
            </el-col>
            <el-col :span="18" class="content">
              <span>{{ guide.intro }}</span>
            </el-col>
          </el-col>
        </el-row>
        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>擅长专业：</span>
            </el-col>
            <el-col :span="18" class="content">
              <el-tag type="info" class="tag">胸部</el-tag>
              <el-tag type="info" class="tag">胸部</el-tag>
              <el-tag type="info" class="tag">胸部</el-tag>
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>账户余额：</span>
            </el-col>
            <el-col :span="18" class="content">
              {{ guide.balance }}
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>账户余额：</span>
            </el-col>
            <el-col :span="18" class="content">
              {{ guide.balance }}
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>累计收入：</span>
            </el-col>
            <el-col :span="18" class="content">
              {{ guide.earningTotle }}
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>被预约次数：</span>
            </el-col>
            <el-col :span="18" class="content">
              {{ guide.apointmentTimes }}
            </el-col>
          </el-col>
        </el-row>
        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>被预约完成次数：</span>
            </el-col>
            <el-col :span="18" class="content">
              {{ guide.apointmentCompleteTimes }}
            </el-col>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="18" class="item">
            <el-col :span="4" class="title">
              <span>操作:</span>
            </el-col>
            <el-col :span="18" class="content">
              <el-button
                v-if="guide.verify == 0"
                type="success"
                size="small"
                plain
                >通过审核</el-button
              >
              <el-button v-if="guide.verify == 1" type="info" size="small" plain
                >驳回审核</el-button
              >
              <el-button
                v-if="guide.verify == -1"
                type="danger"
                size="small"
                plain
                >恢复美导身份</el-button
              >
            </el-col>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <span>美导排班信息</span>
        </div>
        <!-- :range="['2021 03 01', '2021 03 14']" -->
        <!-- :range="[new Date(2021, 2, 1), new Date(2021, 2, 14)]"> -->
        <!-- 
                //日历cell现实内容 各种状态
      //美导日程安排状态

      //预约状态

      //不是当月不显示任何信息，置灰

      /* 
                  <p
              :class="cell.isSelected ? 'is-selected' : ''"
            >
              
              
            </p>
      */
         -->
        <GuideSchedule :guideID="$route.params.id" v-model="date">
          <template #dateCell="{cell}">
            <div  v-if="cell.type === 'current'" class="cellContainer" :class="{'is-selected': cell.isSelected ,'past': cell.isPast}">
              {{cell.text}}
              <!-- ScheduleType  0 休息  1有约  查询不到为或 2为 未安排 -->
              <span class="expression-box" :class="{rest: cell.scheduleType === 0, appointed: cell.scheduleType === 1, unplan: cell.scheduleType === 2}"></span>
              {{cell.isSelected ? "✔️" : ""}}

              <!-- 预约状态现实 状态码请看 readme-->

              <div :style="{visibility: cell.scheduleType === 1 ? '' : 'hidden'}" class="cellAppointmentContainer">
                  <el-tag v-if="cell.appointment.status == 0" size="mini" type="danger" plain>未完成</el-tag>
                  <el-tag v-else-if="cell.appointment.status == 1" size="mini" type="success" plain>待服务</el-tag>
                  <el-tag v-else-if="cell.appointment.status == 2" size="mini" type="" plain>进行中</el-tag>
                  <el-tag v-else-if="cell.appointment.status == 3" size="mini" type="primary" plain>待商家结算</el-tag>
                  <el-tag v-else-if="cell.appointment.status == 4" size="mini" type="warning" plain>待发货</el-tag>
                  <el-tag v-else-if="cell.appointment.status == 5" size="mini" type="danger" plain>待收货</el-tag>
                  <el-tag v-else-if="cell.appointment.status == 6" size="mini" type="success" plain>已结算</el-tag>
                  <el-tag v-else size="mini" type="danger" plain>未知状态</el-tag>
              </div>

            </div>
          </template>
        </GuideSchedule>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>交易信息</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >操作按钮</el-button
          >
        </div>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import { getGdGuide } from "@/api/gdguide";
import FileChoose from "@/components/FileChoose";
import GuideSchedule from "@/layout/components/GuideSchedule";
export default {
  name: "GdGuideDetail",
  components: {
    FileChoose,
    GuideSchedule
  },
  data() {
    return {
      date: new Date(),
      guide: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isEdit: false,
      fileOpen: false,
      fileIndex: undefined,
      // 类型数据字典
      typeOptions: [],
      gdguideList: [],

      // 关系表类型

      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        ID: undefined,
        nickname: undefined,
        realname: undefined,
        openid: undefined,
        unionid: undefined,
        subscribe: undefined,
        headimgurl: undefined,
        diyheadimgurl: undefined,
        mobile: undefined,
        earningTotle: undefined,
        verify: undefined,
        createdAt: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        ID: [{ required: true, message: "ID不能为空", trigger: "blur" }],
        nickname: [
          { required: true, message: "昵称不能为空", trigger: "blur" }
        ],
        realname: [
          { required: true, message: "真实姓名不能为空", trigger: "blur" }
        ],
        openid: [
          { required: true, message: "OPENID不能为空", trigger: "blur" }
        ],
        unionid: [
          { required: true, message: "UNIONID不能为空", trigger: "blur" }
        ],
        subscribe: [
          { required: true, message: "是否订阅不能为空", trigger: "blur" }
        ],
        headimgurl: [
          { required: true, message: "头像不能为空", trigger: "blur" }
        ],
        diyheadimgurl: [
          { required: true, message: "自定义头像不能为空", trigger: "blur" }
        ],
        mobile: [{ required: true, message: "手机不能为空", trigger: "blur" }],
        earningTotle: [
          { required: true, message: "累计收入不能为空", trigger: "blur" }
        ],
        verify: [
          { required: true, message: "审核状态不能为空", trigger: "blur" }
        ],
        createdAt: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    const ID = this.$route.params.id;
    getGdGuide(ID).then(res => {
      this.guide = res.data;
    });
  },
  render() {
    return <p>render</p>;
  },

  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listGdGuide(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.gdguideList = response.data.list;
          this.total = response.data.count;
          this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: undefined,
        nickname: undefined,
        realname: undefined,
        openid: undefined,
        unionid: undefined,
        subscribe: undefined,
        sex: undefined,
        city: undefined,
        province: undefined,
        country: undefined,
        headimgurl: undefined,
        diyheadimgurl: undefined,
        mobile: undefined,
        earningTotle: undefined,
        turnover: undefined,
        apointmentTimes: undefined,
        apointmentCompleteTimes: undefined,
        balance: undefined,
        verify: undefined,
        verifyAt: undefined
      };
      this.resetForm("form");
    },
    getImgList: function() {
      this.form[this.fileIndex] = this.$refs[
        "fileChoose"
      ].resultList[0].fullUrl;
    },
    fileClose: function() {
      this.fileOpen = false;
    },
    // 关系
    // 文件
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageIndex = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加GdGuide";
      this.isEdit = false;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ID);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /* 查看美导详情 */
    handleViewDetail(row) {},
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const ID = row.ID || this.ids;
      getGdGuide(ID).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改GdGuide";
        this.isEdit = true;
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.ID !== undefined) {
            updateGdGuide(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addGdGuide(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      var Ids = (row.ID && [row.ID]) || this.ids;

      this.$confirm('是否确认删除编号为"' + Ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delGdGuide({ ids: Ids });
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.row-bg {
  background-color: #f9fafc;
}
.box-card-header-btn {
  margin-left: 3rem;
}

.cellContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
}
.expression-box {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  margin-left: 0.5rem;
}
.rest {
  background-color: rgba(255, 0, 0, 0.774);
}
.unplan {
  background-color: #b9b9b9;
}
.appointed {
  background-color: #09f061b0;
}

.cellAppointmentContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.past {
  color: #dfe6ec;
}
</style>
